<template>
  <div style="width:100%;height:298px;" id="line"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourceLine",
  props: {
    LineDataSource: {
      type: Object,
      default: function() {
        return {
          offLine: 0,
          offLineHis: 0,
          fireAlarm: 15,
          fireAlarmHis: 25,
          errorAlarm: 254,
          errorAlarmHis: 258,
          integralAlarm: 0,
          integralAlarmHis: 0,
          powerAlarm: 0,
          powerAlarmHis: 0
        };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    LineDataSource(curVal, oldVal) {
      this.initEchats();
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var LineDataSource = echarts.init(document.getElementById("line"));

      var seriesLabel = {
        normal: {
          show: true,
          color: "#a5a5a5",
          position: "right",
          formatter: "{a}: {c}"
        }
      };

      var option = {
        title: {
          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: "报警统计", //主标题文本，'\n'指定换行
          x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          backgroundColor: "rgba(0,0,0,0)", //标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: "#ccc", //标题边框颜色,默认'#ccc'
          borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
          padding: 15, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 20, //主副标题纵向间隔，单位px，默认为10
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 24,
            fontStyle: "normal",
            fontWeight: "300",
            color: "#414141"
          },
          zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6 //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },

        color: ["#00FFFF","#6A5ACD","#1181f3", "#7ecef4", "#34c8ed"],
        grid: { left: "15%", right: "15%" },
        tooltip: {
          show: true, //---是否显示提示框,默认为true
          trigger: "item" //---数据项图形触发
          // // axisPointer: {
          // //   //---指示样式
          // //   type: "shadow",
          // //   axis: "auto"
          // // },
          // padding: 5,
        },
        xAxis: {
          type: "value",
          name: "个",
          axisLabel: {
            formatter: "{value}"
          },
          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示

            //------------------- 箭头 -------------------------
            symbol: ["none", "arrow"], //---是否显示轴线箭头
            symbolSize: [8, 8], //---箭头大小
            symbolOffset: [0, 7], //---箭头位置

            //------------------- 线 -------------------------
            lineStyle: {
              color: "#7f8081",
              width: 1,
              type: "solid"
            }
          }
        },
        yAxis: {
          type: "category",
          inverse: true,

          data: ["当前报警", "历史报警"],
          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示
            //------------------- 箭头 -------------------------
            symbol: ["none", "arrow"], //---是否显示轴线箭头
            symbolSize: [8, 8], //---箭头大小
            // symbolOffset: [0, 7], //---箭头位置

            //------------------- 线 -------------------------
            lineStyle: {
              color: "#7f8081",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            //---坐标轴 标签
            formatter: function(value) {
              return value.split("").join("\n");
            },
            show: true, //---是否显示
            inside: false, //---是否朝内
            rotate: 0, //---旋转角度
            margin: 5 //---刻度标签与轴线之间的距离
            //color:'red',              //---默认取轴线的颜色
          }
        },
        series: [
          {
            name: "离线",
            type: "bar",
            data: [
              this.LineDataSource.offLine,
              this.LineDataSource.offLineHis
            ],
            label: seriesLabel
          },
          {
            name: "火警",
            type: "bar",
            label: seriesLabel,
            data: [
              this.LineDataSource.fireAlarm,
              this.LineDataSource.fireAlarmHis
            ]
          },
          {
            name: "传感器故障",
            type: "bar",
            label: seriesLabel,
            data: [
              this.LineDataSource.errorAlarm,
              this.LineDataSource.errorAlarmHis
            ]
          },
          {
            name: "拆除报警",
            type: "bar",
            label: seriesLabel,
            data: [
              this.LineDataSource.integralAlarm,
              this.LineDataSource.integralAlarmHis
            ]
          },
          {
            name: "低压报警",
            type: "bar",
            label: seriesLabel,
            data: [
              this.LineDataSource.powerAlarm,
              this.LineDataSource.powerAlarmHis
            ]
          }
        ]
      };
      LineDataSource.setOption(option);
      window.addEventListener("resize", function() {
        LineDataSource.resize();
      });
    }
  }
};
</script>
